<template>
  <div class="staplefood-list">
    <ul>
      <li @click="goDetail">
        <img src="http://cp2.douguo.net/upload/caiku/a/5/3/yuan_a5399c98b6da93ea8b2d1d28cbcc34e3.jpeg" alt="">
        <h3>酒酿</h3>
        <div class="food-tips">
          <i class="iconfont icon-gantanhao-yuankuang"></i><span>孕期</span>
          <i class="iconfont icon-gantanhao-yuankuang"></i><span>坐月子</span>
          <i class="iconfont icon-gantanhao-yuankuang"></i><span>哺乳期</span>
        </div>
        <p>宝宝不能吃</p>
      </li>
      <li @click="goDetail">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545726564&di=7dfb262e3b9e14877e0b4fedcc7f386d&imgtype=jpg&er=1&src=http%3A%2F%2Fpic29.photophoto.cn%2F20131114%2F0042040277364074_b.jpg" alt="">
        <h3>年糕</h3>
        <div class="food-tips">
          <i class="iconfont icon-gantanhao-yuankuang"></i><span>孕期</span>
          <i class="iconfont icon-gantanhao-yuankuang"></i><span>坐月子</span>
          <i class="iconfont icon-trues"></i><span>哺乳期</span>
        </div>
        <p>宝宝少吃</p>
      </li>
    </ul>
  </div>
</template>
<script>
// import Vue from 'vue'
import axios from 'axios'
export default {
  data () {
    return {
      foodlist: []
    }
  },
  methods: {
    goDetail () {
      // this.$router.push(`/detail/${item.id}`)
      this.$router.push('/detail')
    }
  },
  created () {
    axios.post('http://10.8.162.9:8081/ace/selectAceAll.do', {
      token: 'McjUBDjSAPiRmii/0a03pV+hf1QUDwYu0FD8RQH7Ao3rjFJwqmLYlkXfIhgZTawXiyZReSxV4j9oeFe60XQUjC6wiY+jPV2cz1R6O0lt+cQ0qqyDNpre3gA1dinsiLPt06OX2vC/h4XuRtQ3cQbg5vZDvkhG7redM0KiX4e9PJdSJyuVyla7ItV9jOHGvHRGHzr7pcJEgd8wmmO4uCamJw=='
    })
      .then((response) => {
        console.log(response.data)
        var data = response.data.list
        this.foodlist = data
        console.log(this.silklist)
      })
      .catch(function (error) {
        console.log(error)
      })
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
.staplefood-list {
  @include rect(100%, 100%);
  // overflow: auto;
  ul {
    @include rect(94%, 100%);
    margin: 3% auto;
    li {
      height: 1.2rem;
      border-bottom: 1px solid #cccccc;
      img {
        @include rect(1rem, 1rem);
        float: left;
        margin: 0.1rem;
      }
      h3 {
        @include rect(60%, 0.25rem);
        float: left;
        line-height: 0.25rem;
        font-size: 0.16rem;
        color: rgb(17, 17, 17);
        font-family: PingFangSC-regular;
        font-weight: 500;
        margin-top: 0.1rem;
      }
      .food-tips {
        float: left;
        @include rect(60%, 0.25rem);
        i {
          color: #d43131;
          font-size: 0.14rem;
          margin-left: 0.05rem;
        }
        span {
          font-size: 0.12rem;
          padding-left: 0.03rem;
        }
      }
      p {
        float: left;
        font-size: 0.12rem;

      }
    }
  }
}
</style>
